<template>
  <van-popup
    v-model="showSelectPasterFlag"
    position="bottom"
    :round="true"
    get-container="body"
    @close="handleClose"
  >
    <div class="background-container" style="padding-bottom: 24px">
      <!-- 头部导航栏 -->
      <div class="header-content">
        <!-- tab栏 -->
        <div class="tab-content">
          <van-tabs v-model="active" line-width="16" sticky change="changeTab">
            <van-tab v-for="item in tabNav" :key="item.id" :title="item.name">
            </van-tab>
          </van-tabs>
        </div>

        <!-- 商店和关闭弹窗 -->
        <div class="operation-content">
          <img
            v-if="active === 1 && !showDelete"
            @click="showDelete = !showDelete"
            class="operation-icon"
            src="@/assets/images/delete-icon1.png"
            alt=""
          />
          <img
            v-if="active === 1 && showDelete"
            @click="showDelete = !showDelete"
            class="operation-icon"
            src="@/assets/images/delete-success.png"
            alt=""
          />
          <img
            @click="handleClose"
            class="operation-icon"
            src="@/assets/images/ic_btn_fold.png"
            alt=""
          />
        </div>
      </div>
      <!-- 内容选择 lazy-load-->
      <van-tabs
        v-if="active === 0"
        class="image-content"
        line-width="0"
        line-height="0"
      >
        <van-tab
          v-for="item in materialList"
          :key="item.id"
          :title="item.category_name"
        >
          <van-row type="flex" gutter="12" justify="start">
            <van-col
              v-for="sub_item in item.carMaterialList"
              :key="sub_item.id"
              span="6"
              class="image-item"
            >
              <van-image
                class="img-cover"
                radius="6"
                lazy-load
                fit="contain"
                :src="sub_item.cover_url"
                @click="setPaster(sub_item)"
              />
            </van-col>
          </van-row>
        </van-tab>
      </van-tabs>

      <!-- 我的贴纸 -->
      <div v-else class="image-content" style="padding-top: 12px">
        <div class="car-avatar-paster-tip">
          温馨提示：上传照片后，为您自动抠图，可移动缩放图片。
        </div>
        <van-row type="flex" gutter="12" justify="start">
          <van-col span="6" class="image-item">
            <van-uploader :after-read="h5UploadBackgroundImage" />
          </van-col>
          <van-col
            v-for="sub_item in userAllMaterialListData"
            :key="sub_item.id"
            span="6"
            class="image-item"
          >
            <van-image
              class="img-cover"
              width="80px"
              height="80px"
              radius="6"
              lazy-load
              fit="contain"
              :src="sub_item.cover_url"
              @click="setPaster(sub_item)"
            >
              <template v-if="showDelete" v-slot:default>
                <div
                  @click.stop="handleDelete(sub_item)"
                  class="delete-container"
                  style="
                    position: absolute;
                    left: 0;
                    right: 0;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    margin: auto;
                    background: rgba(0, 0, 0, 0.4);
                    color: #fff;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                  "
                >
                  删除
                </div>
              </template>
            </van-image>
          </van-col>
        </van-row>
      </div>
    </div>
  </van-popup>
</template>

<script>
import pasterListData from "@/assets/utils/paster";
import {
  getAllCarMaterialListByCategoryId,
  createUserMaterial,
  userAllMaterialList,
  deleteUserMaterial,
} from "@/utils/api";
export default {
  data() {
    return {
      active: 0,
      tabNav: [
        {
          name: "公共贴纸",
          id: 1,
        },
      ],
      materialList: [],
      pasterListData: pasterListData,
      showSelectPasterFlag: false,
      userAllMaterialListData: [],
      showDelete: false,
    };
  },

  watch: {
    "$store.state.design.currentSelectionType": {
      immediate: true,
      handler(val, oldVal) {
        const footerContainerEl = document.querySelector("#footer-container");
        if (val === "paster") {
          footerContainerEl.style.zIndex = "999";
          this.showSelectPasterFlag = !this.showSelectPasterFlag;
        } else if (oldVal === "paster") {
          this.showSelectPasterFlag = false;
        }
      },
    },
    "$store.state.user.token": {
      immediate: true,
      handler(val) {
        if (val) {
          this.getUserAllMaterialList();
          this.tabNav.push({
            name: "我的贴纸",
            id: 2,
          });
        }
      },
    },
  },

  created() {
    console.log("激活activated3333");
    this.getAllMaterialList();
  },

  methods: {
    // 点击删除
    handleDelete(itemData) {
      console.log(itemData);
      deleteUserMaterial({ id: itemData.id }).then((result) => {
        if (result && result.code === 200) {
          this.getUserAllMaterialList();
          this.$toast({
            message: "删除成功！",
            position: "center",
          });
        }
      });
    },

    // h5上传底图图片
    h5UploadBackgroundImage(files) {
      this.handAccountCanvas.h5Upload(files).then((result) => {
        let image_url = result.cover_path;
        this.handAccountCanvas.censorImage(image_url).then((result_) => {
          this.handAccountCanvas
            .updatedImageItem({
              type: "src",
              uri: result_.url,
            })
            .then((imageResult) => {
              // 抠图
              this.handAccountCanvas
                .imageHumanSegment(image_url)
                .then((result) => {
                  let image = result;
                  createUserMaterial({
                    material_img_cover_url: image,
                  }).then((result) => {
                    if (result && result.code === 200) {
                      this.getUserAllMaterialList();
                      this.$toast({
                        message: "添加成功！",
                        position: "center",
                      });
                    }
                  });
                });
            });
        });
      });
    },

    // 获取创作者的素材列表
    getUserAllMaterialList() {
      let paramsObject = this.$store.state.user.queryParams;
      if (paramsObject) {
        userAllMaterialList().then((result) => {
          if (result && result.data && result.data.length > 0) {
            let list = result.data;
            list.forEach((item) => {
              item.cover_url = item.material_img_cover_url;
            });
            this.userAllMaterialListData = result.data;
          } else {
            this.userAllMaterialListData = [];
          }
        });
      }
    },

    // 获取贴纸
    getAllMaterialList() {
      getAllCarMaterialListByCategoryId().then((result) => {
        if (result && result.data && result.data.length > 0) {
          this.materialList = result.data;
        }
      });
    },

    // 设置贴纸
    setPaster(item) {
      let pasterItem = this.handAccountCanvas
        .getObjects()
        .filter((item) => item.elType === "paster");
      if (pasterItem && pasterItem.length > 0) {
        console.log("更换贴纸");
        this.handAccountCanvas.changeCarSticker({ uri: item.cover_url });
      } else {
        this.handAccountCanvas.addImage({
          options: {
            elType: "paster",
            id: item.id,
          },
          uri: item.cover_url,
        });
      }
      // 设置成功之后关闭弹窗
      this.handleClose();
    },

    // 关闭弹窗
    handleClose() {
      this.active = 0;
      this.showDelete = false;
      this.showSelectPasterFlag = false;
      this.$emit("onClose", "paster");
      this.handAccountCanvas.discardActiveObject();
    },
  },
};
</script>

<style lang="less" scoped>
.background-container {
  height: 68vh;
  width: 100vw;
  padding-bottom: 68px;
  display: flex;
  flex-direction: column;

  .header-content {
    display: flex;
    width: 100vw;
    height: 58px;
    align-items: center;
    border-bottom: 1px solid #eaeaea;
  }

  .tab-content {
    width: 280px;
  }

  .operation-content {
    display: flex;
    flex: 1;
    padding: 0 8px;
    justify-content: space-around;
    position: relative;

    &::before {
      display: block;
      content: "";
      height: 24px;
      width: 1px;
      background: #eaeaea;
      position: absolute;
      top: 0;
      left: 5px;
      bottom: 0;
      margin: auto;
    }

    .operation-icon {
      width: 20px;
      height: 20px;
      display: block;
    }
  }

  .image-content {
    flex: 1;
    overflow: hidden;
    position: relative;
    padding: 0 12px 0 12px;
    display: flex;
    flex-direction: column;

    .image-item {
      margin-bottom: 12px;
      position: relative;
    }

    .img-cover {
      width: 80px;
      height: 80px;
      background: #eaeaea;
      border: 1px solid #eaeaea;
    }

    .delete-container {
      position: absolute;
      width: 80px;
      height: 80px;
      right: 0;
      top: 0;
      left: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.4);
      border-radius: 6px;
      margin: auto;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>

<style lang="less">
.image-content {
  .van-tabs__wrap {
    width: 100%;
    height: 48px;

    .van-tab {
      padding: 0 4px;

      .van-tab__text {
        font-size: 12px;
        background: #eaeaea;
        height: 24px;
        line-height: 24px;
        padding: 0 12px;
        border-radius: 12px;
      }
    }

    .van-tab--active {
      .van-tab__text {
        background: #8da6ef;
        color: #fff;
      }
    }
  }

  .van-tabs__content {
    width: 100%;
    height: calc(100% - 48px);
    overflow-x: hidden;
    overflow-y: auto;
  }
}

.car-avatar-paster-tip {
  font-size: 12px;
  color: #888;
  margin-bottom: 12px;
}
</style>
